<template>
	<custom-page title="" :float="true" nav-background-color="transparent" borderBottomColor="transparent" backgroundColor="#F9F9F9">
		<template #page>
			<view class="page-content">
				<common-list-view class="list-view">
					<template #content>
						<view class="detail-layout">
							<swiper class="swiper">
								<swiper-item v-for="(item,index) in getOmittedGraph" :key="index">
									<image :src="item" mode="aspectFill" @click="swiperImageClick(index)"></image>
									<view class="image-num">{{index+1}}/{{getOmittedGraph.length}}</view>
								</swiper-item>
							</swiper>
							<view class="store-info">
								<view class="left-view">
									<view class="store-name">{{pollHallDetail.name}}</view>
									<view class="time">营业时间：{{pollHallDetail.businessHoursStart}} - {{pollHallDetail.businessHoursEnd}}</view>
								</view>
								<view class="right-view" @click="callStoreClick">
									<image :src="asserts.ic_call"></image>
									<view>联系门店</view>
								</view>
							</view>
							<view class="address-layout" @click="toMapClick">
								<image class="left-img" :src="asserts.ic_address_gray"></image>
								<view class="center-info">{{pollHallDetail.address}}</view>
								<image class="right-img" :src="asserts.ic_arrow_right"></image>
							</view>
							<view class="store-detail-title">
								<view class="line"></view>
								<view>店铺详情</view>
								<view class="line"></view>
							</view>
							<view class="store-detail" v-html="pollHallDetail.introduce"></view>
						</view>
					</template>
				</common-list-view>
				<view class="bottom-btn-layout" v-if="userId">
					<view class="btn-view" @click="reserveNowClick">立即预约</view>
				</view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		computed: {
			getOmittedGraph(){
				if(this.pollHallDetail.omittedGraph != null){
					return this.pollHallDetail.omittedGraph
				}else{
					return []
				}
			}
		},
		data() {
			return {
				pollId: '',
				userId: '',
				pollHallDetail: {},
			}
		},
		onLoad(val) {
			if(val.userId && val.userId != 'undefined'){
				this.userId = val.userId
			}
			this.pollId = val.pollId
			this.getPollHallDetail(this.pollId)
		},
		methods: {
			//门店详情
			getPollHallDetail(pollId){
				this.requestCenter.getPollHallDetail(pollId).then(res => {
					this.pollHallDetail = res
				})
			},
			
			//轮播图点击
			swiperImageClick(index){
				let urls = this.getOmittedGraph
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
			
			//联系门店
			callStoreClick(){
				if(this.pollHallDetail.contactNumber){
					uni.makePhoneCall({
						phoneNumber: this.pollHallDetail.contactNumber
					});
				}
			},
			
			//点击导航
			toMapClick(){
				if(this.pollHallDetail.longitude && this.pollHallDetail.latitude){
					let address = this.pollHallDetail.province + this.pollHallDetail.city + this.pollHallDetail.county + this.pollHallDetail.address
					 // #ifdef H5
					let url = `https://apis.map.qq.com/tools/routeplan/eword=${address}&epointx=${this.pollHallDetail.latitude}&epointy=${this.pollHallDetail.longitude}?referer=${'云尚桌球'}&key=${'K6UBZ-D3K3Z-35CXK-ZPV5Z-3BHGK-FVFH5'}`
					window.location.href = url
					// #endif
					// #ifdef MP
					uni.openLocation({
						latitude: parseFloat(this.pollHallDetail.latitude),
						longitude: parseFloat(this.pollHallDetail.longitude),
						name: this.pollHallDetail.name,
						address: address,
					});
					// #endif
					
				}
			},
			
			//点击立即预约
			reserveNowClick(){
				uni.navigateTo({
					url: `/pages/assistant-reserve/assistant-reserve?userId=${this.userId}&storeInfoId=${this.pollHallDetail.id}&storeInfoName=${this.pollHallDetail.name}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.list-view{
		flex: 1;
		overflow: hidden;
	}
	.bottom-btn-layout{
		width: 100%;
		background-color: white;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		.btn-view{
			background-color: #01CBFF;
			border-radius: 44rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.detail-layout{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.swiper{
		height: 750rpx;
		width: 100%;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		.image-num{
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			right: 32rpx;
			bottom: 22rpx;
			position: absolute;
		}
	}
	.store-info{
		width: 100%;
		background-color: white;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		.left-view{
			flex: 1;
			margin-right: 18rpx;
			display: flex;
			flex-direction: column;
			.store-name{
				font-size: 30rpx;
				color: #101413;
				line-height: 44rpx;
			}
			.time{
				margin-top: 16rpx;
				color: #585F70;
				font-size: 28rpx;
				line-height: 48rpx;
			}
		}
		.right-view{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 22rpx;
			color: #021624;
			line-height: 48rpx;
			image{
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 8rpx;
			}
		}
	}
	.address-layout{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 96rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: white;
		margin-top: 16rpx;
		.left-img{
			width: 28rpx;
			height: 32rpx;
			margin-right: 18rpx;
		}
		.center-info{
			flex: 1;
			font-size: 24rpx;
			line-height: 32rpx;
			color: #021624;
		}
		.right-img{
			width: 22rpx;
			height: 24rpx;
			margin-left: 32rpx;
		}
	}
	.store-detail-title{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		background-color: white;
		font-size: 28rpx;
		line-height: 32rpx;
		color: #021624;
		margin-top: 16rpx;
		.line{
			width: 80rpx;
			height: 2rpx;
			background: #021624;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin: 0 16rpx;
		}
	}
	.store-detail{
		width: 100%;
		padding: 16rpx;
		box-sizing: border-box;
		margin-bottom: 32rpx;
	}
	
	
</style>
